<template>
	<view>
		<view class="tops row">
					<view @click="currbtn(0)" :class="curr==0?'top-action':''" class="top-item column">
						<text>退换货</text>
					</view>
					<view @click="currbtn(1)" :class="curr==1?'top-action':''" class="top-item column">
						<text>退款</text>
					</view>
				</view>
		<view v-if="curr==0">		
		<block v-for="(item,index) in myReturnList">
		<view  class="order">
			<view class="top flex align-center justify-between">
				<text>订单号: {{item.order_no}}</text>
				<text>{{item.return_status_str}}</text>
			</view>
			<block v-for="(it,indext) in item.order_goods">
			<view class="list">
				<view class="item flex align-center justify-between" @tap='toReturnRefundDetail(item)'>
					<image :src="it.img_url"></image>
					<view class="flex flex-direction">
						<text>{{it.title}}</text>
						<text>规格：{{it.goods_guige}}</text>
					</view>
					<view class="flex flex-direction">
						<text class="text-price">{{it.sell_price}} </text>
						<text>×{{it.quantity}}</text>
					</view>
				</view>
			</view>
			</block>
			<view class="order-btom flex flex-direction align-end">
				<!-- <view>
					<text class="text2"></text>
					<text class="text2"></text>
					<text class="text3 text-price"></text>
					<text class="text2"></text>
				</view> -->
				<view class="flex align-center" v-if="judgeReturning(item.return_status_str)">
					<view class="btn2">取消申请</view>
				</view>
				<view class="flex align-center" v-if="judgeReturnFail(item.return_status_str)">
					<view class="btn2">再次申请</view>
				</view>
				<view class="flex align-center" v-if="judgeReturnSuccess(item.return_status_str)">
					<view class="btn2" @tap='delOrder(item.order_no)'>删除订单</view>
				</view>
			</view>
		</view>
		</block>
		<!-- #ifdef MP-ALIPAY -->
		<view class="empty"><u-empty text="暂无记录" mode="list" v-if="myReturnList.length==0"></u-empty></view>
		<!-- #endif -->
		</view>
		
		<view v-if="curr==1">
		<block v-for="(item,index) in myReturnAmountList">
		<view  class="order">
			<view class="top flex align-center justify-between">
				<text>订单号: {{item.order_no}}</text>
				<text>{{item.return_status_str}}</text>
			</view>
			<block v-for="(it,indext) in item.order_goods">
			<view class="list">
				<view class="item flex align-center justify-between" @tap='toReturnDetail(item)'>
					<image :src="it.img_url"></image>
					<view class="flex flex-direction">
						<text>{{it.title}}</text>
						<text>规格：{{it.goods_guige}}</text>
					</view>
					<view class="flex flex-direction">
						<text class="text-price">{{it.sell_price}} </text>
						<text>×{{it.quantity}} </text>
					</view>
				</view>
			</view>
			</block>
			<view class="order-btom flex flex-direction align-end">
				<view>
					<text class="text2">交易金额：￥{{item.order_amount}}</text>
					<text class="text2">退款金额</text>
					<text class="text3 text-price">{{item.return_amount}}</text>
					<text class="text2"></text>
				</view>
				<view class="flex align-center" v-if="judgeReturning(item.return_status_str)">
					<view class="btn2">取消申请</view>
				</view>
				<view class="flex align-center" v-if="judgeReturnFail(item.return_status_str)">
					<view class="btn2">再次申请</view>
				</view>
				<view class="flex align-center" v-if="judgeReturnSuccess(item.return_status_str)">
					<view class="btn2" @tap='delOrder(item.order_no)'>删除订单</view>
				</view>
			</view>
		</view>
		</block>
		
		<!-- #ifdef MP-ALIPAY -->
		<view class="empty"><u-empty text="暂无记录" mode="list" v-if="myReturnAmountList.length==0"></u-empty></view>
		<!-- #endif -->
		
		</view>
		
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	export default {
		data() {
			return {
				user:'',
				myReturnList:[],
				myReturnAmountList:[],
				curr:0
			}
		},
		computed: {
			judgeReturning: function() {
				return function(val) {
					if(val == '退款中') {
						return true;
					}else{
						return false;
					}
				}
		
			},
			judgeReturnSuccess: function() {
				return function(val) {
					if(val == '退款成功') {
						return true;
					}else{
						return false;
					}
				}
					
			},
			judgeReturnFail: function() {
				return function(val) {
					if(val == '退款失败') {
						return true;
					}else{
						return false;
					}
				}
					
			},
		},
		onLoad(){
			if(this.curr ==0){
				this.loadMyReturn()	
			}
		
		},
		methods: {
			loadMyReturn: function() {
				try {
					this.user = uni.getStorageSync('user');
					var userId = this.user.user_id;
					api.get({
						url: 'UserOrder/GetOrderGoodsList',
						data: {
							user_id: userId,
							page: 1,
							pagesize: 30
						},
						success: data => {
							console.log('ww'+JSON.stringify(data))
							if (data.ErrCode == 0) {
								this.myReturnList = data.Response
							}
						}
					});
				} catch (e) {
					uni.showModal({
						title: '提示',
						content: '账号超时，请重新登陆',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
				}
			},
			loadMyReturnAmount: function() {
				try {
					this.user = uni.getStorageSync('user');
					var userId = this.user.user_id;
					api.get({
						url: 'UserOrder/GetRefundOrderList',
						data: {
							user_id: userId,
							page: 1,
							pagesize: 30
						},
						success: data => {
							console.log(JSON.stringify(data))
							if (data.ErrCode == 0) {
								this.myReturnAmountList = data.Response
							}
						}
					});
				} catch (e) {
					uni.showModal({
						title: '提示',
						content: '账号超时，请重新登陆',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
				}
			},
		cancelOrder(item){
				api.get({
					url: 'UserOrder/GetOrderCancel',
					data: {
						order_no: item.order_no,
					},
					success: data => {
						console.log(JSON.stringify(data))
						if (data.ErrCode == 0) {
							
						}
					}
				});
			},
		delOrder(item){
				api.get({
					url: 'UserOrder/GetOrderDel',
					data: {
						order_no: item.order_no,
					},
					success: data => {
						console.log(JSON.stringify(data))
						if (data.ErrCode == 0) {
							
						}
					}
				});
			},
	   toReturnDetail(item){//退款
		   // uni.navigateTo({
		   // 	url:'/pages/refundDetails/refundDetails?key='+item.order_id
		   // })
	   },
	   toReturnRefundDetail(item){//退货
		 // uni.navigateTo({
		 // 	url:'/pages/returnRefundDetails/returnRefundDetails?key='+item.order_goods_id
		 // })  
	   },
		currbtn: function(ind) {
			this.curr = ind
			this.fetchPageNum =1
			if(this.curr ==0){
				this.myReturnList = []
				this.loadMyReturn()
			}else if(this.curr ==1){
			    this.myReturnAmountList = []
				this.loadMyReturnAmount()
			}			
		},		   
		}
	}
</script>

<style lang="scss" scoped>
	.empty{
		height: 600rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.top-item{
			width: 110rpx;
			height: 70rpx;
			align-items: center;
			justify-content: center;
		}
		.top-action{
			width: 110rpx;
			height: 70rpx;
			border-bottom: 2rpx solid $btn-bground;
			align-items: center;
			justify-content: center;
		}
		.top-action text{
			color: $btn-bground;
		}
	.tops{
		background-color: #fff;
		width: 100%;
		border-bottom: 1rpx solid #eeeeee;
		height: 70rpx;
		align-items: center;
		justify-content: space-around;
		
	}
	.row{
		display: flex;
		flex-direction: row;
	}
	.column{
		display: flex;
		flex-direction: column;
	}
	.btn1{
		width: 160upx;
			height: 54upx;
			border-radius: 27upx;
			border: solid 1upx #cccccc;
			text-align: center;
			line-height: 54upx;
			font-size: 26upx;
				color: #444;
				margin-right: 20upx;
				margin-top: 20upx;
	}
	.btn2{
		margin-top: 20upx;
	width: 160upx;
		height: 54upx;
		border-radius: 27upx;
			border: solid 1upx $btn-bground;
			text-align: center;
			line-height: 54upx;
			font-size: 26upx;
				color: $btn-bground;
	}
	.order-btom{
		width: 100%;
		background-color: #fff;
		padding: 20upx;
		box-sizing: border-box;
	}
	.text1{
		font-size: 22upx;
			color: #828282;
	}
	.text2{
		font-size: 24upx;
			color: #666666;
			margin-left: 10upx;
	}
	.text3{
		margin-left: 10upx;
		font-size: 30upx;
			color: #f70000;
	}
	.order{
		margin-bottom: 20upx;
	}
	.top>text:nth-child(1){
			font-size: 24upx;
			color: #999999;
	}
	.top>text:nth-child(2){
			font-size: 28upx;
			color: $btn-bground;
	}
	.top{
		padding: 0 20upx;
		height: 76upx;
		width: 100%;
		background-color: #fff;
		border-bottom: 1upx solid #ddd;
	}
.item>view:nth-child(3)>text{
		text-align: right;
			font-size: 24upx;
			color: #000000;
	}
	.item>view:nth-child(3)>text:nth-child(2){
		color: #999999;
	}
	.item>view:nth-child(2){
		width: 382upx;
	}
	.item>view:nth-child(2)>text:nth-child(1){
		font-size: 28upx;
			color: #000000;
	}
	.item>view:nth-child(2)>text:nth-child(2){
	font-size: 22upx;
		color: #999999;
		margin-top: 20upx;
	}
	.item{
		padding: 0 20upx;
		width: 100%;
		height: 190upx;
		background-color: #fff;
		border-bottom: 1upx solid #ddd;
	}
	.item image{
		width: 187upx;
			height: 141upx;
	}
</style>
